import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'

import reducers from './reducers/index'
import config from './utils/config'
import App from './App';
import * as serviceWorker from './serviceWorker';

// persist store
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { PersistGate } from 'redux-persist/integration/react'


const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : f => f
const myReducer = persistReducer({
  key: 'root',
  storage
}, reducers);

const store = createStore(myReducer, compose(
  applyMiddleware(thunk),
  reduxDevtools
))
const persistor = persistStore(store);
ReactDOM.render(
  (<Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
    <BrowserRouter>
      <App></App>
    </BrowserRouter>
     </PersistGate>
  </Provider>),
  document.getElementById('root')
);


serviceWorker.unregister();
